<template>
  <!-- <div>api统一管理</div> -->
  <Panel title="安全管理能力" class="panel">
    <div class="df jcsb">
      <div>
         <el-menu
            default-active="4"
            class="el-menu-vertical-demo"
            background-color="#545c64"
          >
            <el-menu-item @click="rou" index="2">
              <i class="el-icon-menu"></i>
              <span slot="title">数据分级分类</span>
            </el-menu-item>
            <el-menu-item index="4">
              <i class="el-icon-setting"></i>
              <span slot="title">资产管理</span>
            </el-menu-item>
          </el-menu>
      </div>
      <div class='f1 rgmain'>
        <div class="df">
          <div class= 'toubu'>
            <p class="item2">部门</p>
            <p class="item1">管理层</p>
            <p class="item">财务部</p>
            <p class="item">安全产品部</p>
            <p class="item">技术服务部</p>
            <p class="item">大数据平台部</p>
            <p class="item">业务拓展部</p>
            <p class="item">产品拓展部</p>
            <p class="item">物联网部</p>
            <p class="item">商务部</p>
            <p class="item">综合管理部</p>
            <p class="item">电信平台部</p>
          </div>
        <el-table class="tatle" :header-cell-style="{background: '#EBF2F9'}"  :data="tableData" stripe ref="table">         
          <!-- api名称 -->
          <el-table-column prop="name" label="序号" width="300" >     
          </el-table-column>  
          <!-- 请求方式   -->
          <el-table-column  prop="create" label="资产代码" width="300" column-key="create">    
          </el-table-column>  
          <!-- 创建时间   -->
          <el-table-column prop="create_time"  label="资产名称" width="300" column-key="create_time">    
          </el-table-column>
          <el-table-column prop="create_time"  label="资产类型 " width="300" column-key="create_time">    
          </el-table-column>
          <el-table-column prop="create_time"  label="状态" width="300" column-key="create_time">
            <template slot-scope="scope" >
              <div class="df aic">
                  <div class="yuan"></div>
                  <el-button size="mini" type="text" disabled  @click="handlechakan(scope.row)">已链接</el-button>
              </div>
            </template>    
          </el-table-column>
          <el-table-column prop="create_time"  label="权限" width="300" column-key="create_time">    
          </el-table-column>
          <!--  操作  -->
          <el-table-column fixed="right" label="操作" width="260">
            <template slot-scope="scope" >
              <div class="df">
                  <el-button size="mini" type="text" disabled  @click="handlechakan(scope.row)">允许链接</el-button>
                  <el-button size="mini" type="text"  @click="handlechakan(scope.row)">断开链接</el-button>
              </div>
            </template>
          </el-table-column> 
          </el-table>
          
        </div>
        <el-pagination
          @current-change="handleCurrentChange"
          :current-page="currentPage"
          :page-size="pageSize"
          :page-sizes="[3, 5, 10, 20]"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
        >
        </el-pagination>
      </div>      
    </div>
  </Panel>
</template>

<script>
// 引入panel
import Panel from "@/components/panel/Panel";
// 引入正则
import { GROUP_REG , PHONE_REG } from "@/utils/reg";
export default {
  components: {
    Panel,
  },
  data() {
    return {
      createTime:[new Date(),new Date()],
      //创建时间
       pickerOptions: {
          shortcuts: [{
            text: '昨天',
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 1);
              picker.$emit('pick', [start, end]);
            }
          },
            {
            text: '最近一周',
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
              picker.$emit('pick', [start, end]);
            }
          }, {
            text: '最近一个月',
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
              picker.$emit('pick', [start, end]);
            }
          }, {
            text: '最近三个月',
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
              picker.$emit('pick', [start, end]);
            }
          }]
        },
      //搜索
      // 搜索框
      searchData: {
        orderNo: "",
        consignee: "",
        phone: "",
        orderState: "",
        aaa: '',
        bbb: '',
        ccc: '',
        ddd: '',
        eee: '',
        date: []
      },
      options: [{
          value: '选项1',
          label: '对象1'
        }, {
          value: '选项2',
          label: '对象2'
        }, {
          value: '选项3',
          label: '对象3'
        }],
        options1: [{
          value: '选项1',
          label: '分级1'
        }, {
          value: '选项2',
          label: '分级2'
        }, {
          value: '选项3',
          label: '分级3'
        }],
      search:"",
      // value: "",
       //输入框
      formLabelWidth: "120px",
      value2:true,
      // 编辑弹出框
      dialogTableVisible1:false,
      // 新建分组弹框
      dialogTableVisible2:false,
      innerVisibleProvider:false,
      currentPage: 1, //表示当前显示的页码
      pageSize: 5, //每一页显示的条数
      total: 150, //总条数
      apigroup:[],//分组
      rules: {},
     
      tableData: [
        {
          name:"1",
          create_time: "绿色",
          create: '1级',
          num: 'admin',
          time: '2022-11-24',
          remark: '1111111'
        },
        {
          name:"2",
          create_time: "绿色",
          create: '2级',
          num: 'admin',
          time: '2022-11-23',
          remark: '1111111'
        },
        {
          name:"3",
          create_time: "绿色",
          create: '9级',
          num: 'admin',
          time: '2022-11-26',
          remark: '1111111'
        },
        {
          name:"4",
          create_time: "绿色",
          create: '4级',
          num: 'admin',
          time: '2022-11-24',
          remark: '1111111'
        },
        {
          name:"5",
          create_time: "绿色",
          create: '4级',
          num: 'admin',
          time: '2022-11-24',
          remark: '1111111'
        },
        {
          name:"6",
          create_time: "绿色",
          create: '4级',
          num: 'admin',
          time: '2022-11-24',
          remark: '1111111'
        },
      ],
       // 编辑弹框数据
      editData: {
        id:"",
        name:"",
        create_time:"",
        create:"",
        num:'',
        remark :"",
      },
      // 新建API弹框数据
      newAPIData:{
          api_name:"",
          method: "",
          api_type: "",
          api_group_id: "",
          create_time: "",
          modify_time:"",
          service_provider: "",
          creator: "",
          url:"",
          secret_id:"",
          secret_key:"",
          describe:"",
          auth_params_info:"",
          app_name:"",
          historical_call:"",
          api_status:"",
          average_duration:"",
          success_rate:"",
          failure_rate:"",
          param_key:"",
          param_value:"",
          forward:"是",

      },
      // 新建分组
      api_group_info:{
        aaa: '',
        bbb: '',
        ccc: '',
        ddd: '',
        remark :"",
      },
    };
    
  },
  methods: {
    rou(){
        this.$router.push(
          {
            path:'/group/group'
          }
        )
    },
    //查询
    search123() {
      this.tableData = [{
          name:"456",
          create_time: "绿色",
          create: '1级',
          num: 'admin',
          time: '2022-11-24',
          remark: '1111111'
        }]
    },
    //重置
    reset123() {
      this.searchData = {
        orderNo: "",
        consignee: "",
        phone: "",
        orderState: "",
        date: []
      };
      this.tableData = [
        {
          name:"456",
          create_time: "绿色",
          create: '1级',
          num: 'admin',
          time: '2022-11-24',
          remark: '1111111'
        },
        {
          name:"ssfa",
          create_time: "绿色",
          create: '2级',
          num: 'admin',
          time: '2022-11-23',
          remark: '1111111'
        },
        {
          name:"788",
          create_time: "绿色",
          create: '9级',
          num: 'admin',
          time: '2022-11-26',
          remark: '1111111'
        },
        {
          name:"jjj",
          create_time: "绿色",
          create: '4级',
          num: 'admin',
          time: '2022-11-24',
          remark: '1111111'
        },
      ]
    },
     //改变时间
    timeChange(){
      console.log(this.createTime)
      let startTime = this.createTime[0]+' 00:00:00'
      let endTime = this.createTime[1]+' 23:59:59'

    },
    ruwry(){
      console.log(this.newAPIData.api_type);
    },
    // getClientWidth(){
    //   console.log(this.$refs.tables.offsetWidth)
    //   console.log(this.$refs.propsModel.offsetWidth)
    //   this.$refs.propsModel.style.width=this.$refs.tables.offsetWidth+'px'
    // },
    // 新建分组
    newAPI(){
      this.dialogTableVisible2 = true;
    },
    // 新建分组-添加
    submitForm(){
      this.$refs.RuleForm.validate(async (valid) => {
        if (valid) {
          // let res = await addAccount(this.AddRuleForm);

          // //判定 注册成功后,进行跳转到指定页面
          // if (res.code == 0) {
          //   this.$router.push("/account/account-list");
          // }
        } else {
          //不通过
          this.$message.error("添加失败");
        }
      });
    },
     // 删除
    handleDelete(id) {
      this.$confirm("确定删除？", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
      .then(() => {
          this.$message({
            type: 'success',
            message: '删除成功!'
          });
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          });          
        });
    },
     // 查看
    handlechakan(row) {
      this.dialogTableVisible1 = true;
      this.editData = { ...row };
    },
     // 编辑
    handleEdit(row) {
      this.dialogTableVisible1 = true;
      this.editData = { ...row };
    },
    // 编辑-保存修改
    saveEdit() {
      this.$confirm("确定修改？是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
      .then(() => {
          this.$message({
            type: 'success',
            message: '编辑成功!'
          });
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消编辑'
          });          
        });
    },
    savetoConfigure(){
      this.$confirm("确定修改？是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
      .then(() => {
          this.$message({
            type: 'success',
            message: '已完成API配置，下一步请提交审核!'
          });
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消编辑'
          });          
        });
    },
    handleCurrentChange(val) {
      this.currentPage = val;
      // this.getCateData();
    },
  },
   mounted() {
  },
};
</script>

<style  scoped>
.header{
  margin-bottom: 8px;
}
/* 创建时间 */
.demonstration{
  margin-right: 10px;
}
.block{
  margin-right: 8px;
}
/* 操作按钮 */
.caozuo{
  width: 30px;
  text-align: center;
  border-radius: 50%;
}
.newAPI{
  width: 114px;
  height: 34px;
  background: #33BDFC;
  border: 1px solid rgba(51,189,252,1);
  border-radius: 3px;
  color: #fff;
}
.el-dialog{
  width: 500px;
}
.ggg{
  width: 500px;
}
.el-input.is-disabled /deep/.el-input__inner {
  background-color: #fff !important;

}

.dynamic-header{
  position: absolute;
  height: 150px;
  top:198px;
  left: 20px;
  background-color: #fff;
  z-index: 3000;
  /* border: 1px solid red; */
  box-shadow:-5px 5px  8px 1px rgba(0, 0, 0, 0.2) ;

}
/* 表格 */
.tatle{
  margin-bottom: 50px;
}
/* 弹框 */
.el-dialog__wrapper /deep/.el-dialog__header{
   /* background-color: antiquewhite; */
   /* padding: 0 10px; */
   margin: 0 30px;
   border-bottom: 1px solid #E5E5E5;
  }
  .el-dialog{
    position: relative;
  }
  .el-dialog__wrapper /deep/.el-dialog__header::before{
    position: absolute;
    left: 30px;
    top: 23px;
    content: "";
    display: block;
    clear: both;
    width: 2px;
    height: 18px;
    background-color: rgb(34, 180, 216);
}
.caller{
  margin-top: 15px;
  width: 100%;
}
.rgmain{
  width: 75%;
  padding-left: 15px;
}
.group{
  color: black;
  font-weight: 700;
}
.group1{
  color: black;
  font-weight: 400;
}
.el-menu-vertical-demo{
  height: 100%;
}
.toubu{
  width: 100px;
}
.item{
  height: 30px;
  line-height: 30px;
  text-align: center;
  border: 1px solid #eee;
  margin-right: 10px;
}
.item1{
  height: 30px;
  line-height: 30px;
  text-align: center;
  border: 1px solid #eee;
  background-color: #409EFF;
  margin-right: 10px;
}
.item2{
  height: 30px;
  line-height: 30px;
  text-align: center;
  border: 1px solid #eee;
  margin-right: 10px;
}
.yuan{
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background-color: rgb(51, 218, 51);
}
</style>
